import React, { FC, ReactElement } from 'react';

import { IPhones } from '../typings';
//获取路由参数
import { useParams } from 'react-router';
import { usePhoneDetail } from '../hooks';

import Header from '../components/Header';
import DetailPage from '../components/Detail';

interface IUrlParams {
  id: string | undefined;
  cid: string | undefined;
  vid: string | undefined;
  count: string | undefined;
}

export const Detail: FC = (): ReactElement => {
  const { id, cid, vid, count }: IUrlParams = useParams();
  // console.log(id, cid, vid, count);
  //1 1 1 1

  //没有路由参数时导航至首页
  if (!id || !cid || !vid) {
    window.location.href = '/';
  }

  //从state找到符合id的某项手机数据
  const phoneDetail: IPhones | undefined = usePhoneDetail(id!);

  //没有找到匹配数据条件的内容时
  if (!phoneDetail) {
    window.location.href = '/';
  }

  return (
    <div className="container">
      <Header headerTitle="商品详情" iconShow={true} />
      {phoneDetail && (
        <DetailPage
          phoneDetail={phoneDetail}
          cid={parseInt(cid as string)}
          vid={parseInt(vid as string)}
          totalCount={parseInt(count as string)}
        />
      )}
    </div>
  );
};
